<template>
  <div class="user-setup">
    <p class="setup-pic">
      <span class="setup-title">我的头像</span>
      <img :src="userInfo.userPhoto?userInfo.userPhoto:require('../../assets/images/man.png')" alt="" class="pic-avatar">
    </p>
    <p class="setup-item">
      <span class="setup-title">我的昵称</span>
      <router-link :to="'/index/user/setupName?nickname='+userInfo.nickName">
        <span class="nick-name">{{userInfo.nickName}}</span>
        <span class="nick-up">[修改]</span>
      </router-link>
    </p>
    <p class="setup-item">
      <span class="setup-title">我的性别</span>
      <router-link :to="'/index/user/setupGender?gender='+userInfo.userSex">
        <span class="gender-show">{{userInfo.userSex?(userInfo.userSex==0?'男':'女'):'请选择'}}</span>
        <span class="nick-up" v-if="userInfo.userSex!=null">[修改]</span>
      </router-link>
    </p>
    <p class="setup-item">
      <span class="setup-title">我的密码</span>
      <router-link to="/index/user/setupPasswd">
        <span class="passwd-up">修改密码</span>
      </router-link>
    </p>
    <p class="setup-item">
      <span class="setup-title">全局屏蔽</span>
      <span class="shield-up" @click="setShield()">{{userInfo.useShield==null?'':(userInfo.useShield==0?'已停用':'已启用')}}</span>
    </p>
    <p class="setup-item">
      <span class="setup-title">缓存管理</span>
      <span class="status-up" @click="clearTemp()">清除缓存</span>
    </p>
    <p class="setup-item">
      <span class="setup-title">当前状态</span>
      <span class="status-up" @click="util.logout()">退出登录</span>
    </p>
  </div>
</template>

<script>
export default {
  data(){
    return{
      userInfo:{},
    }
  },
  created(){
    this.getUserInfo();
  },
  methods:{
    getUserInfo(){
      this.$http.postForm('/user/userInfo', null, res=>{
        this.userInfo = res;
      });
    },
    setShield(){
      this.userInfo.useShield = this.userInfo.useShield==0?1:0;
      this.$http.postForm('/user/useShield', {useShield:this.userInfo.useShield});
    },
    clearTemp(){
      this.$confirm('是否清除自动登录、手机/电脑站标识等缓存？', '提示', {
        customClass:"el-message-box_custom",
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        localStorage.clear();
        this.$message.success("清除成功");
      }).catch(() => {
      });
    }
  }
}
</script>

<style lang='scss' scoped>
.user-setup {
  padding: 30px;
  .setup-pic{
    height: 50px;
    line-height: 50px;
    .setup-title {
      vertical-align: top;
      display: inline-block;
      line-height: 50px;
      color: #aaaaaa;
      margin-right: 15px;
    }
    .pic-avatar {
      height: 50px;
      width: 50px;
    }
  }
  .setup-item {
    line-height: 35px;
    .setup-title {
      color: #aaaaaa;
      margin-right: 15px;
    }
    .status-up, .shield-up{
      cursor: pointer;
    }
    .shield-up:hover, .status-up:hover{
      color: $base-color;
    }
    .nick-up{
      display: inline-block;
      margin-left: 10px;
    }
  }
}
</style>